<template>
  <div>
    <van-nav-bar :title="title" left-text="返回" left-arrow
      @click-left="router.back()" :fixed="true" />
    <div v-if="state.list.length > 0" style="margin-top: 50px;">
      <approvalItem v-for='item in state.list' :key='item.approval_id' :item='item' :type="type"
        @click='handleClick(item.approval_id)'></approvalItem>
    </div>
    <div v-else>
      <van-empty :description="type !== 'agreement' ? type == 'approval' ? '暂无审批' : '暂无申请' : '暂无协议待签'" />
    </div>
  </div>
</template>

<script setup lang='ts'>
import { userStore } from '@/store';
import { onMounted, onUnmounted, reactive } from 'vue';
import router from '@/router';
import { storeToRefs } from 'pinia';
import approvalItem from '@/components/approvalItem.vue';
import { menuList } from '@/common/commonMap'
const user = userStore()
const { myApplicationList, agreementList } = storeToRefs(user);
let type: string = router.currentRoute.value.params.type as string
console.log(type);

const title = menuList.find(item => {
  return item.type == type
})?.text||''

const state = reactive({
  list: type == 'agreement' ? agreementList : myApplicationList,
})

onMounted(() => {
  if (type !== 'agreement') {
    user.getMyapprovalList(type)
  } else {
    user.getagreementList()
  }

})
onUnmounted(() => {
  user.clearMyapprovalList()
})

const handleClick = (id: string) => {
  if (type == 'agreement') {
    router.push({
      name: 'PetAdoptionAgreement',
      params: {
        id
      }
    })
    return
  }
  router.push({
    name: 'approvalDetail',
    params: {
      id,
      type
    }
  })
}
</script>

<style lang='less' scoped></style>
